<template><!--这个组件是侧边栏，公用的-->
  <el-menu
    
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#606266"
      text-color="#F5F5F5" 
      :collapse="iscollapse"
    
     ><!-- active-text-color="#ffd04b"    text-color="#fff"  -->
       
       <h3 class="myh3">计算机实验中心后台</h3>
     
       <el-menu-item index="1" @click="clickMean1(1)">
          <i class="el-icon-s-home" :class="{active: this.$route.path==='/home'}" ></i>
          <span slot="title" :class="{active: this.$route.path==='/home'}">首页</span>
       </el-menu-item>

       <el-menu-item index="2"  @click="clickMean2(2)">
          <i class="el-icon-s-custom"  :class="{active:this.$route.path==='/teacher'}"></i>
          <span slot="title"  :class="{active:this.$route.path==='/teacher'}">教师管理</span>
       </el-menu-item>

        <el-menu-item index="6"  @click="clickMean6()">
          <i class="el-icon-user-solid"  :class="{active:this.$route.path==='/roomadmin'}"></i>
          <span slot="title"  :class="{active:this.$route.path==='/roomadmin'}">机房管理员</span>
       </el-menu-item>

      <el-menu-item index="3" @click="clickMean3()">
         <i class="el-icon-document"  :class="{active:this.$route.path==='/couresimport'}"></i>
         <span slot="title" :class="{active:this.$route.path==='/couresimport'}">课表导入</span>
      </el-menu-item>

       <el-menu-item index="7" @click="clickMean7()">
         <i class="el-icon-sell"  :class="{active:this.$route.path==='/excelexport'}"></i>
         <span slot="title" :class="{active:this.$route.path==='/excelexport'}">信息导出</span>
      </el-menu-item>

      <el-submenu index="4">
      <template slot="title">
          <i class="el-icon-document-copy" :class="{active:this.$route.path==='/classroom'||this.$route.path==='/nowcoures'||this.$route.path==='/changcourse'||this.$route.path==='/journal'||this.$route.path==='/buqian'}"></i>
          <span :class="{active:this.$route.path==='/classroom'||this.$route.path==='/nowcoures'||this.$route.path==='/changcourse'||this.$route.path==='/journal'||this.$route.path==='/buqian'}">课程管理</span>
     </template>
      <el-menu-item-group>
          <el-menu-item index="4-1" :class="{active:this.$route.path==='/classroom'}" @click="clickclassroom()">该学期所有课程</el-menu-item>
          <el-menu-item index="4-2" :class="{active:this.$route.path==='/nowcoures'}" @click="clicknowcourse()">当天课程</el-menu-item>
          <el-menu-item index="4-3" :class="{active:this.$route.path==='/changcourse'}" @click="clickchangcourse()">调课管理</el-menu-item>
          <el-menu-item index="4-4" :class="{active:this.$route.path==='/journal'}" @click="clickjournal()">调课日志</el-menu-item>
            <el-menu-item index="4-5" :class="{active:this.$route.path==='/buqian'}" @click="clickbuqian()">补签</el-menu-item>
      </el-menu-item-group>
    </el-submenu>


      <el-submenu index="5">
      <template slot="title">
          <i class="el-icon-user"  :class="{active:this.$route.path==='/test'||this.$route.path==='/admin'||this.$route.path==='/lookadmin'}"></i>
          <span  :class="{active:this.$route.path==='/test'||this.$route.path==='/admin'||this.$route.path==='/lookadmin'}">实验室负责人</span>
     </template>
      <el-menu-item-group>
        
          <el-menu-item index="1-2" @click="clickAdmin()">负责人导入</el-menu-item>
           <el-menu-item index="1-3" @click="clickLookAdmin()">查看负责人</el-menu-item>
      </el-menu-item-group>
    </el-submenu>

  </el-menu>
    
</template>

<script>
export default {
    data() {
       return{
        iscollapse:false
       }
    },

     methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },

      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },

      clickMean1(index){
        this.$router.push("/home").catch(err=>{})
     
        
      },

      clickMean2(index){
        this.$router.push("/teacher").catch(err=>{})
       
      },
      clickMean3(){
        this.$router.push("/couresimport").catch(err=>{})
      },
      clickMean6(){
       this.$router.push("/roomadmin").catch(err=>{})
      }
       ,
      clickclassroom(){
        this.$router.push("/classroom").catch(err=>{})
      },
      clicknowcourse(){//当天课程
         this.$router.push("/nowcoures").catch(err=>{})
      },
      clickchangcourse(){//调课
         this.$router.push("/changcourse").catch(err=>{})
      },
      
      clickAdmin(){
      this.$router.push("/admin").catch(err=>{})
      },
      clicktest(){
        this.$router.push("/test").catch(err=>{})
      },
      clickLookAdmin(){
         this.$router.push("/lookadmin").catch(err=>{})
      },
      clickMean7(){//导出
        this.$router.push("/excelexport").catch(err=>{})
      },
      clickjournal(){
         this.$router.push("/journal").catch(err=>{})
      },
      clickbuqian(){
          this.$router.push("/buqian").catch(err=>{})
      }

    },
    
}
</script>

<style scoped>
    .el-menu {
     border-right: solid 0px #e6e6e6;
     overflow: hidden;
    }

    .myh3 {
        height: 100%;
        color: #fff8f8;
        text-align: center;
        font-size: 17px;
        font-weight: 600;
        line-height: 42px;
    }

   .active{
    color: #409EFF;
   }
  
   
</style>